<template>
  <div class="event-page page gray-page">
    <nav-bar title="事件概览统计" theme="white">
      <template #custom>
        <img src="@/assets/images/cockpit/home/status-bar-search.png" class="iconimg" alt="" @click="leadershipClick" />
      </template>
    </nav-bar>
    <div class="event-overview">
      <van-tabs v-model="active" sticky @click="tabonClick" :offset-top="44" class="van-hairline--bottom">
        <van-tab title="事件概况">
          <h1 class="event-overview-title">事件概况</h1>
          <div class="event-overview-total">
            <div class="event-overview-total-left">
              <div>
                <img src="@/assets/images/overview/overview-total.png" />
              </div>
              <p>事件总数</p>
            </div>
            <div class="event-overview-total-right">{{ count }}</div>
          </div>
          <div class="event-overview-halecicle">
            <Halfcircle :chartList="chartMap" :total="count" v-if="halfFlag"></Halfcircle>
          </div>
          <gb-card class="home-event-container">
            <van-row>
              <van-col span="6" align="center" v-for="(item, key) in gridEvent" :key="key">
                <div class="home-event-item">
                  <div class="home-event-item__pos">
                    <p class="total" :style="{ color: gridEventExtra[key].color }">{{ item.count }}</p>
                    <p class="total-text">{{ item.name }}</p>
                  </div>
                </div>
              </van-col>
            </van-row>
          </gb-card>
          <div class="event-overview-ranking">
            <h1>区域事件排名</h1>
            <div v-if="rankingregionalFlag === true">
              <VerticalColumn :rankingregional="rankingregional"></VerticalColumn>
            </div>
            <div class="nodata" v-else>暂无数据</div>
          </div>
          <div class="event-overview-ranking">
            <h1>处置率统计分析</h1>
            <DoubleDiscount :disposalRate="disposalRate" v-if="disposalRatestatus"></DoubleDiscount>
          </div>
          <div class="event-overview-ranking">
            <h1>事件类别TOP5</h1>
            <TransverseHistogram v-if="flagType" :eventTypeTop="eventTypeTop"></TransverseHistogram>
          </div>
          <div class="event-overview-ranking">
            <h1>事件来源TOP5</h1>
            <div style="height: 200px">
              <Radar v-if="flag" :value="sourcedata" :grid="{ top: '0%' }"></Radar>
            </div>
          </div>
          <div class="event-overview-ranking">
            <h1>事件区域TOP5</h1>
            <div class="event-overview-ranking-table">
              <table v-if="eventRegion.length">
                <thead>
                  <tr class="table-thead">
                    <th>地区</th>
                    <th>案件数量</th>
                    <th>办结量</th>
                    <th>办结率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in eventRegion" :key="index">
                    <td>{{ item.regionName }}</td>
                    <td>{{ item.eventCount }}</td>
                    <td>{{ item.disposalCount }}</td>
                    <td v-if="item.growthRate === '1'">
                      <div style="color: #3cbdd0">{{ item.disposalRate }}</div>
                      <div class="redOne"></div>
                    </td>
                    <td v-else-if="item.growthRate === '-1'">
                      <div style="color: #e28556">{{ item.disposalRate }}</div>
                      <div class="daosanjiao"></div>
                    </td>
                    <td v-else-if="item.growthRate === '0'">
                      <div style="color: #313636">{{ item.disposalRate }}</div>
                      <div class="hangxian"></div>
                    </td>
                    <td v-else style="display: table-cell">
                      <div style="color: #313636">{{ item.disposalRate }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="nodata" v-else>暂无数据</div>
            </div>
          </div>
          <div style="border-top: 16px solid #e6e6e6"></div>
        </van-tab>
        <van-tab title="处置统计">
          <div class="event-overview-disposal">
            <div
              class="event-overview-disposal-title"
              :class="{ activeLeadr: current == index }"
              v-for="(item, index) in tabOptions"
              :key="index"
              @click="wsdbl(item, index)"
            >
              {{ item.description }}
            </div>
          </div>
          <p class="event-overview-rate">处置率统计分析</p>
          <div class="event-overview-box">
            <div class="event-overview-box-left">
              <Eventannular :handlingData="handlingData.disposalRate" v-if="hangdlingstatus"></Eventannular>
            </div>
            <div class="event-overview-box-right">
              <div v-if="liuzhuanbumen">
                <p>受理事件数</p>
                <p>{{ handlingData.total }}</p>
              </div>
              <div v-if="wgyStatus">
                <p>全部事件数</p>
                <p>{{ handlingData.total }}</p>
              </div>
              <div>
                <p>处置事件数</p>
                <p>{{ handlingData.disposeCounts }}</p>
              </div>
            </div>
          </div>
          <DoubleDiscount :disposalRate="handlingData.chartMap" v-if="hangdlingstatus"></DoubleDiscount>
          <div class="event-overview-processing">
            <div>办件时长统计</div>
            <DoubleColumn v-if="gridhangdlingstatus" :handlingData="gridhandlingData"></DoubleColumn>
          </div>
          <div class="event-overview-processing">
            <div>处置满意率统计</div>
            <LinePie :satisdata="satisdata" v-if="satisdataFlag"></LinePie>
          </div>
        </van-tab>
        <van-tab title="事件列表">
          <div class="event-overview-disposal event-list">
            <div
              class="event-overview-disposal-title"
              :class="{ activeLeadr: newEventIndex == index }"
              v-for="(item, index) in newEvent"
              :key="index"
              @click="newEventClick(item, index)"
            >
              {{ item.description }}
            </div>
            <van-sticky class="page-scroll" :offset-top="160">
              <div v-if="eventliststatus">
                <div v-if="listData.lastEvent.length > 0">
                  <template v-if="lastevent">
                    <gb-card border class="list-item" v-for="(item, key) in listData.lastEvent" :key="key">
                      <item-template :item="item" type="Record-detail"></item-template>
                    </gb-card>
                  </template>
                </div>
                <div v-if="listData.lastCompletionEvent.length > 0">
                  <template v-if="lastcompiet">
                    <gb-card border class="list-item" v-for="(item, key) in listData.lastCompletionEvent" :key="key">
                      <item-template :item="item" type="Record-detail"></item-template>
                    </gb-card>
                  </template>
                </div>
                <template v-else>
                  <p class="nodata">暂无内容</p>
                </template>
              </div>
            </van-sticky>
          </div>
        </van-tab>
        <van-tab title="事件统计">
          <div class="list-main page-main">
            <van-sticky :offset-top="44">
              <van-tabs line-height="0" swipe-threshold="3" @click="chuzhiEventClick">
                <van-tab v-for="(item, index) in chuzhiEvent" :key="index" :name="item.eventManageCode">
                  <template #title>
                    <van-tag
                      v-if="searchForm.eventType === item.eventManageCode"
                      type="primary"
                      round
                      plain
                      size="large"
                      style="background-color: rgba(60, 189, 208, 0.1)"
                    >
                      {{ item.eventManageName }}
                    </van-tag>
                    <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
                      {{ item.eventManageName }}
                    </van-tag>
                  </template>
                </van-tab>
              </van-tabs>
            </van-sticky>
            <van-sticky class="page-scroll" :offset-top="160" style="border-top: 8px solid #e6e6e6">
              <div class="management">
                <div class="hiddren"></div>
                <div class="management-box">
                  <p>事件总数</p>
                  <p>{{ tongjidataObj.allEventCount }}</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>待处置事件数</span>
                  </p>
                  <p>{{ tongjidataObj.pendingDisposal }}</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>已处置事件数</span>
                  </p>
                  <p>{{ tongjidataObj.disposed }}</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>已办结事件数</span>
                  </p>
                  <p>{{ tongjidataObj.finish }}</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>已延期事件数</span>
                  </p>
                  <p>{{ tongjidataObj.timeOut }}</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>事件处置率</span>
                  </p>
                  <p>{{ tongjidataObj.disposedRate }}%</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>事件办结率</span>
                  </p>
                  <p>{{ tongjidataObj.finishRate }}%</p>
                </div>
                <div class="management-body">
                  <p>
                    <span></span>
                    <span>处置满意率</span>
                  </p>
                  <p>{{ tongjidataObj.satisfiedRate }}%</p>
                </div>
              </div>
            </van-sticky>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <model ref="eventSerch" @eventSerch="eventSerchClick" :bumen="bumenShow"></model>
    <model-evet ref="eventModel" @alleventSerch="allEventClcick"></model-evet>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import EventOverview from '@/api/eventOverview'
import {
  Halfcircle,
  VerticalColumn,
  DoubleDiscount,
  TransverseHistogram,
  Radar,
  Eventannular,
  DoubleColumn,
  LinePie
} from '@/components/Chart'
import ItemTemplate from '../../../components/Widget/Cockpit/EventOverview/template'
import Model from '../../../components/Widget/Cockpit/EventOverview/ModelItem'
import ModelEvet from '../../../components/Widget/Cockpit/EventOverview/Model'
// import Template from '../../components/Widget/Resident/List/template'
export default {
  name: 'index',
  components: {
    // Template,
    Halfcircle,
    VerticalColumn,
    DoubleDiscount,
    TransverseHistogram,
    Radar,
    Eventannular,
    DoubleColumn,
    LinePie,
    ItemTemplate,
    Model,
    ModelEvet
  },
  data() {
    return {
      active: Number(localStorage.getItem('activeIdx')) ? Number(localStorage.getItem('activeIdx')) : 0,
      gridEventExtra: [
        {
          color: '#3CBDD0'
        },
        {
          color: '#3B71DA'
        },
        {
          color: '#E2AB56'
        },
        {
          color: '#E28556'
        }
      ],
      gridEvent: [],
      count: '',
      chartMap: [],
      eventTypeTop: {},
      sourcedata: {},
      indicatordata: [],
      eventRegion: [],
      flag: false,
      flagType: false,
      halfFlag: false,
      current: 0,
      tabOptions: [
        {
          code: '1',
          description: '网格员'
        },
        {
          code: '0',
          description: '职能部门'
        }
      ],
      rankingregional: {},
      rankingregionalFlag: false,
      handlingType: 1,
      handlingData: {},
      handlingFlag: false,
      rateForm: {
        startTime: '2021-08-01',
        endTime: '2021-08-31',
        regionCode: '',
        type: '',
        timeUnitType: ''
      },
      disposalRate: {}, // 处置率
      disposalRatestatus: false,
      hangdlingstatus: false,
      gridhangdlingstatus: false,
      wgyStatus: true,
      liuzhuanbumen: false,
      gridhandlingData: {},
      foemdata: {
        regionCode: '',
        startTime: '',
        endTime: '',
        timeUnitType: '',
        type: ''
      },
      satisdata: [],
      satisdataFlag: false,
      newEvent: [
        {
          code: '1',
          description: '最新事件'
        },
        {
          code: '0',
          description: '最新办结事件'
        }
      ],
      newEventIndex: 0,
      searchForm: {
        eventStatus: '',
        communityRegion: '',
        reportBeginTime: '',
        reportEndTime: '',
        regionCode: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        eventType: ''
      },
      listData: {},
      lastevent: true,
      lastcompiet: false,
      chuzhiEvent: [],
      chuzhiEventIndex: 0,
      chuzhiTotal: '',
      modelTypeDefult: 0,
      bumenShow: false,
      tongjidataObj: {},
      eventliststatus: false
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.rateForm.regionCode = this.user.regionCode
    this.foemdata.regionCode = this.user.regionCode
    this.searchForm.regionCode = this.user.regionCode
    console.log(localStorage.getItem('activeIdx'))
  },
  mounted() {
    this.getOverview()
    this.getRate()
    this.getTop()
    this.source()
    this.eventregion()
    this.eventManageCount()
    this.eventListData()
  },
  methods: {
    getOverview() {
      this.gridEvent = []
      this.chartMap = []
      this.halfFlag = false
      EventOverview.Init.overview(this.foemdata).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.gridEvent.push(
            {
              count: data.disposalRate + '%',
              name: '处置率'
            },
            {
              count: data.completionRate + '%',
              name: '办结率'
            },
            {
              count: data.overtimeCounts + '%',
              name: '超时延期数'
            },
            {
              count: data.extensionRate + '%',
              name: '延期率'
            }
          )
          if (data.chartMap.list.length > 0) {
            this.count = data.chartMap.list[0][1].value
            for (var i = 0; i < data.chartMap.list.length; i++) {
              this.chartMap.push(data.chartMap.list[i][0])
              this.halfFlag = true
            }
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    getRate() {
      this.disposalRatestatus = false
      EventOverview.Init.rate(this.rateForm).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.disposalRate = data
          this.disposalRatestatus = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    getTop() {
      this.foemdata.type = 1
      this.flagType = false
      EventOverview.Init.top5(this.foemdata).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.eventTypeTop = data
          this.flagType = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    source() {
      this.foemdata.type = 2
      this.flag = false
      EventOverview.Init.top5(this.foemdata).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.sourcedata = data
          this.indicatordata = data.indicator
          this.flag = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    eventregion() {
      this.foemdata.type = 3
      EventOverview.Init.top5(this.foemdata).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.eventRegion = data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    eventManageCount() {
      this.rankingregionalFlag = false
      EventOverview.Init.eventManageCount(this.foemdata).then(res => {
        if (res.data.status === 0) {
          const { data } = res.data
          this.rankingregional = data
          this.rankingregionalFlag = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // tab切换
    tabonClick(name) {
      this.active = name
      localStorage.setItem('activeIdx', name) // 将选中的tab缓存起来
      if (name === 0) {
        this.bumenShow = false
        this.modelTypeDefult = 0
        this.getOverview()
        this.getRate()
        this.getTop()
        this.source()
        this.eventregion()
        this.eventManageCount()
      } else if (name === 1) {
        this.foemdata.type = 1
        this.foemdata.timeUnitType = 1
        this.getHandling()
        this.gridgetHandling()
        this.getsatisfactionRate()
        this.modelTypeDefult = 1
      } else if (name === 2) {
        this.searchForm.eventType = ''
        this.eventListData()
        this.modelTypeDefult = 2
      } else if (name === 3) {
        this.departmentList()
        this.modelTypeDefult = 3
        this.getHeat()
      }
    },
    // 网格员切换
    wsdbl(item, index) {
      this.current = index
      if (index === 1) {
        this.bumenShow = true
        this.foemdata.type = 2
        this.wgyStatus = false
        this.liuzhuanbumen = true
      } else {
        this.bumenShow = false
        this.foemdata.type = 1
        this.wgyStatus = true
        this.liuzhuanbumen = false
      }
      this.getHandling()
      this.gridgetHandling()
      this.getsatisfactionRate()
    },
    // 办件概况统计
    getHandling() {
      EventOverview.Init.handling(this.foemdata).then(res => {
        if (res.data.status === 0) {
          this.handlingData = res.data.data
          this.hangdlingstatus = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 办件时长统计
    gridgetHandling() {
      EventOverview.Init.gridhandling(this.foemdata).then(res => {
        if (res.data.status === 0) {
          this.gridhandlingData = res.data.data
          this.gridhangdlingstatus = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 处置满意率统计
    getsatisfactionRate() {
      EventOverview.Init.satisfactionRate(this.foemdata).then(res => {
        if (res.data.status === 0) {
          this.satisdata = res.data.data
          this.satisdataFlag = true
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    eventListData() {
      EventOverview.Init.list(this.searchForm).then(res => {
        if (res.data.status === 0) {
          this.listData = res.data.data
          this.eventliststatus = true
          console.log(this.listData)
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    newEventClick(item, index) {
      this.newEventIndex = index
      if (index === 0) {
        this.lastevent = true
        this.lastcompiet = false
      } else {
        this.lastevent = false
        this.lastcompiet = true
      }
    },
    chuzhiEventClick(name) {
      this.searchForm.eventType = name
      this.getHeat()
    },
    // 事件统计
    getHeat() {
      EventOverview.Init.heat(this.searchForm).then(res => {
        if (res.data.status === 0) {
          this.tongjidataObj = res.data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 一级分类
    departmentList() {
      EventOverview.Init.departmentListyj().then(res => {
        if (res.data.status === 0) {
          this.chuzhiEvent = res.data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    leadershipClick() {
      if (this.modelTypeDefult === 3) {
        this.$refs.eventModel.popUpshow = true
      } else if (this.modelTypeDefult === 2) {
        this.$refs.eventModel.popUpshow = true
      } else if (this.modelTypeDefult === 0) {
        this.$refs.eventSerch.popUpshow = true
      } else if (this.modelTypeDefult === 1) {
        this.$refs.eventSerch.popUpshow = true
      }
    },
    eventSerchClick(msg) {
      if (this.modelTypeDefult === 0) {
        this.gridEvent = []
        this.eventRegion = []
        this.chartMap = []
        this.halfFlag = false
        this.flagType = false
        this.foemdata = msg
        this.getOverview()
        this.getRate()
        this.getTop()
        this.source()
        this.eventregion()
        this.eventManageCount()
      } else if (this.modelTypeDefult === 1) {
        this.foemdata = msg
        this.getHandling()
        this.gridgetHandling()
        this.getsatisfactionRate()
      }
    },
    allEventClcick(msg) {
      if (this.modelTypeDefult === 2) {
        this.gridEvent = []
        this.eventRegion = []
        this.chartMap = []
        this.halfFlag = false
        this.flagType = false
        this.searchForm = msg
        this.eventListData()
      } else if (this.modelTypeDefult === 3) {
        this.chuzhiEvent = []
        this.searchForm = msg
        this.departmentList()
      }
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
@import '~@/assets/style/EventOverview/EventOverview.less';
</style>
